<template>
  <div>
    <div class="top">
      <div id="components-form-demo-advanced-search">
        <a-row :gutter="24" style="margin-bottom: 15px">
          <a-col :span="6">
            客户编号：
            <a-select
              show-search
              option-filter-prop="children"
              style="width: 60%"
              :filter-option="filterOption"
              v-model="searchData.tenantId"
            >
              <a-select-option
                :value="item.tenantId"
                v-for="item in accArray"
                :key="item.id"
                :titles="item.title"
              >
                {{ item.companyName + "/" + item.tenantId }}
              </a-select-option>
            </a-select>
          </a-col>
          <a-col :span="6">
            产品名称：<a-input :maxLength="128" v-model="searchData.chineseName" />
          </a-col>
          <a-col :span="6"> SKU：<a-input :maxLength="128" v-model="searchData.sku" /> </a-col>
          <a-col :span="6" v-if="expand">
            产品标签：<a-input :maxLength="128" v-model="searchData.productTag" />
          </a-col>
          <a-col v-show="!expand" :span="6">
            <span style="margin-left: 20px">
              <a-button type="primary" class="top-btn" @click="searchBtn">
                查询
              </a-button>
              <a-button
                type="primary"
                class="top-btn"
                style="margin-left: 10px"
                @click="resetBtn"
              >
                重置
              </a-button>
            </span>
            <a
              :style="{ marginRight: '8px', fontSize: '14px' }"
              @click="expand = !expand"
            >
              {{ expand ? "折叠" : "展开" }}
              <a-icon :type="expand ? 'up' : 'down'" />
            </a>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="6">
            <div v-show="expand">
              创建时间：
              <a-range-picker
                style="width: 60%"
                :placeholder="['年/月/日', '年/月/日']"
                format="YYYY-MM-DD"
                v-model="dateTime"
                @change="DateChange"
              />
            </div>
          </a-col>
          <a-col v-show="expand" :span="6">
            <span style="margin-left: 20px">
              <a-button type="primary" class="top-btn" @click="searchBtn">
                查询
              </a-button>
              <a-button
                type="primary"
                class="top-btn"
                style="margin-left: 10px"
                @click="resetBtn"
              >
                重置
              </a-button>
            </span>
            <a
              :style="{ marginRight: '8px', fontSize: '14px' }"
              @click="expand = !expand"
            >
              {{ expand ? "折叠" : "展开" }}
              <a-icon :type="expand ? 'up' : 'down'" />
            </a>
          </a-col>
        </a-row>
      </div>
    </div>
    <span style="margin-left: 20px">
      <a-dropdown style="background: #409cff; color: #ffff; border: none">
        <a-menu slot="overlay" @click="handleMenuClick">
          <a-menu-item key="0"> g;cm*cm*cm </a-menu-item>
          <a-menu-item key="1"> lb;in*in*in </a-menu-item>
          <a-menu-item key="2"> oz;ft*ft*ft </a-menu-item>
        </a-menu>
        <a-button style="margin-left: 8px">
          单位转换 <a-icon type="down" />
        </a-button>
      </a-dropdown>
    </span>
    <!-- :row-selection="{
        selectedRowKeys: selectedRowKeys,
        onChange: onSelectChange,
      }" -->
    <a-spin tip="Loading..." :spinning="spinning">
      <a-table
        style="margin-top: 20px"
        :columns="columns"
        :scroll="{ x: 1500 }"
        :data-source="data"
        :pagination="false"
      >
        <span slot="action" class="action" slot-scope="text, record">
          <a-dropdown :trigger="['click']" v-if="record.isOnFile == 0">
            <a class="ant-dropdown-link" style="color: rgb(41, 41, 224)">
              打印
            </a>
            <a-menu
              slot="overlay"
              @click="(e) => download(e, record)"
              style="text-align: center"
            >
              <a-menu-item key="0"> 60*30mm </a-menu-item>
              <a-menu-item key="1"> 自定义打印 </a-menu-item>
              <a-menu-item key="3"> letter </a-menu-item>
              <a-menu-item key="4"> A4 </a-menu-item>
            </a-menu>
          </a-dropdown>
        </span>
      </a-table>
    </a-spin>
    <!-- 分页器 -->
    <div style="margin: 35px 0; text-align: center">
      <a-config-provider>
        <a-pagination
          :current="pages.currentpage"
          show-size-changer
          :pageSizeOptions="['10', '20', '30']"
          :show-total="
            (total) => `${$t('m.page.Total')} ${total} ${$t('m.page.items')}`
          "
          @showSizeChange="showChange"
          :buildOptionText="
            (props) => ` ${props.value} ${$t('m.page.a')}/${$t('m.page.page')}`
          "
          show-quick-jumper
          :default-current="pages.currentpage"
          :total="pages.total"
          @change="onChangeView"
        />
      </a-config-provider>
      <TagsModal />
    </div>
  </div>
</template>

<script>
import TagsModal from "@/components/clientSide/SKUManage/SKUList/TagsModal.vue";
import req from "@/utils/req";
import { SKU_PDF6030, SKU_PDFA4 } from "@/apis/clientSide/SKUManage/SKUList";
import { bysku_page } from "@/apis/system/WM/SkuList";
import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
import moment from "moment";
import { mapState } from "vuex";
export default {
  components: {
    TagsModal,
  },
  created() {
    this.getSKUTableList();
  },
  data() {
    return {
      spinning: false,
      expand: false,
      dateTime: [],
      startTime: null,
      endTime: null,
      locale,
      //表格数据
      data: [],
      selectedRowKeys: [], // Check here to configure the default column
      units: "重量：",
      unitFlag: "重量(g)",
      unitsSize: "长(cm)*宽(cm)*高(cm)", //分页数据
      pages: {
        total: 30,
        pagesize: 10,
        currentpage: 1,
      },
      searchData: {
        chineseName: "",
        productTag: "",
        weight: "",
        endWeight: "",
        boxSize: "**",
        startTime: "",
        endTime: "",
        sku: "",
        width: "",
        height: "",
        long: "",
        isOnFile: 0,
        unitSystem: "0",
      },
    };
  },
  methods: {
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
    //搜索日期选择器
    DateChange(date, dateString) {
      date;
      if (dateString && dateString.length > 0) {
        this.searchData.startTime = dateString[0];
        this.searchData.endTime = dateString[1];
      } else {
        this.searchData.startTime = "";
        this.searchData.endTime = "";
      }
    },
    disabledDate(current) {
      // Can not select days before today and today
      return (
        current && current < moment(this.searchData.startTime).endOf("day")
      );
    },
    //打印
    async download(e, row) {
      if (e.key === "0") {
        let res = await SKU_PDF6030(`top=${row.productTag}&&bottom=${row.sku}`);
        req.exportPDF("60*30mm", res);
      } else if (e.key === "1") {
        setTimeout(() => {
          this.$bus.$emit("SkuListTags", row);
        }, 10);
      } else if (e.key === "3") {
        let res = await SKU_PDFA4(`top=${row.productTag}&&bottom=${row.sku}`);
        req.exportPDF("letter", res);
      } else if (e.key === "4") {
        let res = await SKU_PDFA4(`top=${row.productTag}&&bottom=${row.sku}`);
        req.exportPDF("A4", res);
      }
    },
    //重置按钮
    resetBtn() {
      for (let key in this.searchData) {
        this.searchData[key] = "";
      }
      this.startTime = null;
      this.dateTime = [];
      this.endTime = null;
      this.searchData.boxSize = "**";
      this.searchData.isOnFile = 0;
      this.searchData.unitSystem = "0";
      this.getSKUTableList();
    },
    // 搜索按钮
    searchBtn() {
      this.getSKUTableList();
    },
    // 日期改变不
    onChange(date, dateString) {
      console.log(date, dateString);
    },
    //页码变更
    showChange(size, current) {
      this.pages.currentpage = size;
      this.pages.pagesize = current;
      this.getSKUTableList();
    },
    //搜索日期选择器
    onCreateChange(date, dateString) {
      date;
      this.searchData.startTime = dateString;
    },
    //搜索日期选择器
    onEndChange(date, dateString) {
      date;
      this.searchData.endTime = dateString;
    },
    //单位转换
    handleMenuClick(e) {
      this.searchData.unitSystem = e.key;
      if (e.key === "0") {
        this.units = "重量：";
        this.unitsSize = "长(cm)*宽(cm)*高(cm)";
        this.unitFlag = "重量(g)";
        this.getSKUTableList();
      } else if (e.key === "1") {
        this.units = "lb：";
        this.unitsSize = "in*in*in";
        this.unitFlag = "重量(lb)";
        this.getSKUTableList();
      } else if (e.key === "2") {
        this.units = "oz：";
        this.unitsSize = "ft*ft*ft";
        this.unitFlag = "重量(oz)";
        this.getSKUTableList();
      }
    },
    //分页改变
    onChangeView(pageNumber) {
      this.pages.currentpage = pageNumber;
      this.getSKUTableList();
    },
    // 表格选择框
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys;
    },
    async getSKUTableList() {
      this.spinning = true;
      let searchDatas = { ...this.searchData };
      if (searchDatas.boxSize.length >= 3) {
        searchDatas.long = searchDatas.boxSize.split("*")[0];
        searchDatas.width = searchDatas.boxSize.split("*")[1];
        searchDatas.height = searchDatas.boxSize.split("*")[2];
      }
      searchDatas.current = this.pages.currentpage;
      searchDatas.size = this.pages.pagesize;
      searchDatas.startTime = searchDatas.startTime
        ? this.searchData.startTime + ` 00:00:00`
        : "";
      searchDatas.endTime = searchDatas.endTime
        ? this.searchData.endTime + ` 23:59:59`
        : "";
      let { code, responseBody } = await bysku_page(searchDatas);
      if (code === "200") {
        let { records } = responseBody;
        this.pages.total = Number(responseBody.total);
        records.forEach((item) => {
          // item.IDX = i + this.pages.currentpage * this.pages.pagesize - 9;
          item.boxSize = `${item.long}*${item.width}*${item.height}`;
          item.createTime = item.createTime.replace("T", "  ");
          item.updateTime = item.updateTime.replace("T", "  ");
        });
        this.data = records;
        this.spinning = false;
      }
    },
  },
  computed: {
    ...mapState(["accArray"]),
    columns() {
      return [
        // {
        //   title: "序号",
        //   dataIndex: "IDX",
        //   key: "IDX",
        //   align: "center",
        //   width: "4%"
        // },
        {
          title: "客户账号",
          dataIndex: "tenantId",
          key: "tenantId",
          align: "center",
          ellipsis: true,
          width: "6%",
        },
        {
          title: "SKU",
          dataIndex: "sku",
          key: "sku",
          align: "center",
          ellipsis: true,
        },
        {
          title: "产品标签",
          dataIndex: "productTag",
          key: "productTag",
          align: "center",
          width: "8%",
          ellipsis: true,
        },
        {
          title: "产品名称",
          dataIndex: "chineseName",
          key: "chineseName",
          align: "center",
          ellipsis: true,
          width: "9%",
        },
        {
          title: this.unitsSize,
          dataIndex: "boxSize",
          key: "boxSize",
          align: "center",
          ellipsis: true,
          width: "11%",
        },
        {
          title: this.unitFlag,
          dataIndex: "weight",
          key: "weight",
          align: "center",
          ellipsis: true,
        },
        {
          title: "创建时间",
          dataIndex: "createTime",
          key: "createTime",
          align: "center",
        },
        {
          title: "更新时间",
          dataIndex: "updateTime",
          key: "updateTime",
          align: "center",
        },
        {
          title: "备注",
          dataIndex: "remarks",
          key: "remarks",
          align: "center",
          ellipsis: true,
        },
        {
          title: "操作",
          key: "operation",
          fixed: "right",
          align: "center",
          width: 100,
          scopedSlots: { customRender: "action" },
        },
      ];
    },
  },
};
</script>

<style lang="less" scoped>
#components-form-demo-advanced-search {
  padding: 5px;
  input {
    width: 60%;
  }
}
.top-btn {
  background: #fff;
  color: #3eae7c;
  text-shadow: none;
}
.top-btn:hover {
  background: #3eae7c;
  color: #fff;
}
.top-search {
  input {
    margin-right: 20px;
  }
}
/deep/.action {
  border-bottom: 1px solid #3eae7c;
}
.ant-dropdown-menu-item:hover {
  color: #3eae7c;
}
.action {
  border-bottom: 1px solid rgb(41, 41, 224);
  color: rgb(41, 41, 224);
}
</style>
